<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="题目">
        <el-input v-model="searchObj.title" placeholder="题目"/>
      </el-form-item>

      <el-form-item label="部门" class="item el-col-6">
        <el-select v-model="searchObj.oneTypeId" @change="twoTypeSelects">
          <el-option
            v-for="item in oneTypeSelectList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="岗位" class="item el-col-6">
        <el-select v-model="searchObj2.twoTypeName">
          <el-option
            v-for="item in twoTypeSelectList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-button type="primary" icon="el-icon-search" @click="fetchData(pageInfo.pageNum)">查询</el-button>
      <!--<el-button type="default" @click="resetData()">清空</el-button>-->
    </el-form>

    <!-- 列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      style="width: 100%">

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (pageInfo.pageNum - 1) * pageInfo.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="title" label="题目"/>
      <el-table-column prop="oneTypeName" label="部门" />
      <el-table-column prop="twoTypeName" label="岗位" />
      <el-table-column prop="answer" label="答案"/>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="pageInfo.pageNum"
      :total="pageInfo.total"
      :page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center;"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @current-change="fetchData"
      @size-change="changeSize"
    />
  </div>
</template>
<script>
  import * as subjectService from '@/api/subject';
  import * as selectService from '@/api/select';

  export default {

    // 定义数据
    data() {
      return {
        listLoading: true, // 数据是否正在加载
        list: null, // banner列表
        total: 0, // 数据库中的总记录数
        page: 1, // 默认页码
        limit: 10, // 每页记录数
        searchObj: {}, // 查询表单对象
        searchObj2: {}, // 目的下拉始化

        pageInfo: {
          pageSize: 10,
          pageNum: 1,
          total: 0
        },

        oneTypeSelectList: [],
        twoTypeSelectList: []
      }
    },

    // 当页面加载时获取数据
    created() {
      this.fetchData(1);


      this.oneTypeSelects();
    },

    methods: {
      // 调用api层获取数据库中的数据
      fetchData(currentPageNum) {
        const query = {};
        this.pageInfo.pageNum = currentPageNum;
        query.pageInfo = this.pageInfo;
        query.title = this.searchObj.title;
        query.oneTypeId = this.searchObj.oneTypeId;
        query.twoTypeId = this.searchObj2.twoTypeId;

        subjectService.getShortAnswerList(query).then(
          response => {
            this.list = response.data.list;
            this.pageInfo.total = response.data.total;
            // 数据加载并绑定成功
            this.listLoading = false
          }
        )
      },

      // 类型1 下拉数据
      oneTypeSelects(){
        selectService.getOneTypeSelectList().then( res =>{
          this.oneTypeSelectList = res.data;
        });
      },

      // 类型2 下拉数据
      twoTypeSelects(){
        selectService.getTwoTypeSelectList(this.searchObj.oneTypeId).then( res =>{
          this.twoTypeSelectList = res.data;
          this.searchObj2 = {};
        });
      },

      //删除题库， 该方法逻辑删除
      removeDataById(id) {
        this.$confirm('此操作将删除题库信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //确定执行then方法
          //调用接口
          subjectService.deleteShortAnswer(id)
            .then(response => {
              //提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新页面
              this.fetchData(this.pageInfo.pageNum);
            })
        })
      },

      // 当页码发生改变的时候
      changeSize(size) {
        console.log(size)
        this.pageInfo.pageSize = size;
        this.fetchData(1);
      },

      // 重置查询表单
      resetData() {
        console.log('重置查询表单')
        this.searchObj = {}
        this.fetchData()
      },

    }
  }
</script>

